<template>

<div class="login">

  <div class="wrapper">
    <van-cell-group inset>
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
      <van-field v-model="password" type="password" label="密码" />
    </van-cell-group>
    <van-button class="button" color="#7232dd" size="normal" @click="login">登录</van-button>
    <van-button class="button" color="#7232dd" size="normal" @click="goregister">去注册</van-button>
    <van-button class="blockbutton" color="#7232dd" plain block @click="back">返回</van-button>
  </div>



</div>


</template>

<script setup>
import { Toast } from 'vant';
import { ref,reactive } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute()
const router = useRouter()

let username = ref()
let password = ref()

function back(){
  router.push('/mine');
}
function login(){
    axios.post('http://localhost:3200/login',{
        username: username.value,
        password: password.value,
    }).then(function(res){
        if(res.data == '登录成功'){
          Toast(res.data)
          router.push({path:'/mine',query:{username:username.value}})
        }
        else{
          Toast(res.data)
        }
    })
}
function goregister(){
  router.push({path:'/register'})
}
</script>

<style scoped lang="less">
.login{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .wrapper{
    margin-top: 40%;
    margin-left: 10%;
    width: 80%;
    height: 300px;
    border-radius: 20px;
    background: #4084e9;
    overflow: hidden;
    .van-cell-group{
      width: 90%;
      margin-top: 40px;
      margin-bottom: 30px;
      margin-left: 5%;
    }
    .button{
      margin-left: 8%;
      margin-right: 8%;
      width: 100px;
      margin-bottom: 10px;
    }
    .blockbutton{
      width: 250px;
      margin-left: 8%;
    }
  }
}
</style>